<template>
  <div class="x-table">
    <div class="x-table-main" :style="{
      height: tableHeight,
      maxHeight: tableHeight
    }">
      <el-table ref="xTable" :row-key="props.rowKey" header-cell-class-name="x-table-main" :height="props.height"
        :class="{ singleTable: props.isSingle }" :data="props.tableData" :stripe="props.stripe" :border="props.border"
        v-loading="props.tableLoading" @selection-change="selectionChange" @select="tableSelect" highlight-current-row
        @row-click="rowClick">
        <el-table-column v-if="props.isSelection" type="selection" width="45" align="center" />
        <el-table-column v-if="props.hasIndex" label="序号" width="55" align="center">
          <template #default="scope">
            {{ props.pageCurrent * props.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="col in props.tableColumns">
          <el-table-column :show-overflow-tooltip="props.tooltips" :width="col.width ? col.width : 'auto'"
            :align="col.align ? col.align : 'left'" :min-width="col.minWidth" :fixed="col.fixed" v-if="col.slot"
            :key="col.prop" :prop="col.prop" :label="col.label">
            <template #default="{ row }">
              <slot :name="col.prop" :row="row"></slot>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="props.tooltips" :width="col.width ? col.width : 'auto'"
            :align="col.align ? col.align : 'left'" :min-width="col.minWidth" :fixed="col.fixed" v-else :key="col.prop"
            :prop="col.prop" :label="col.label" :formatter="col.formatter"></el-table-column>
        </template>
      </el-table>
    </div>
    <div class="page-wrapper" v-if="props.showPagination">
      <el-pagination :total="props.recordsTotal" :page-size="props.pageSize" v-model="props.pageCurrent"
        layout="prev, pager, next, total" @current-change="pageChange"></el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ITableColumn } from './ITableColumn'
import elpUtil from '~/utils/elp'
import { computed } from 'vue'

interface TableProps {
  tableColumns: ITableColumn[]
  tableData: any[]
  selection: any[]
  showPagination?: boolean
  pageSize?: number
  pageCurrent?: number
  recordsTotal?: number
  tableLoading?: boolean
  isSelection?: boolean
  tooltips?: boolean
  isSingle?: boolean
  hasIndex?: boolean
  rowKey?: string
  stripe?: boolean
  border?: boolean,
  height?: string | number
}

const tableHeight = computed(() => {
  return props.showPagination ? 'calc(100% - 37px)' : '100%'
})

let props = withDefaults(defineProps<TableProps>(), {
  tableColumns: () => [],
  tableData: () => [],
  selection: () => [],
  showPagination: true,
  pageSize: 15,
  recordsTotal: 0,
  pageCurrent: 0,
  tableLoading: false,
  isSelection: false,
  tooltips: true,
  isSingle: false,
  hasIndex: false,
  rowKey: '',
  stripe: true,
  border: false,
  height: '100%'
})
let emit = defineEmits(['selectionChange', 'tableSelect', 'pageChange', 'rowClick', 'update:selection'])
let xTable = elpUtil.refs.table()

let selectionChange = (selection: any[]) => {
  emit('update:selection', selection)
  emit('selectionChange', selection)
}

let tableSelect = (selection, row) => {
  if (props.isSingle) {
    xTable.value?.clearSelection()
    if (selection.length === 0) {
      emit('tableSelect', selection, null)
      return
    }
    xTable.value?.toggleRowSelection(row, true)
  }
  emit('tableSelect', selection, row)
}
let toggleRowSelection = (row, isSelected = false) => {
  xTable.value?.toggleRowSelection(row, isSelected)
}

const setSelections = (rows) => {
  clearSelection()
  for (const row of rows) {
    xTable.value?.toggleRowSelection(row, true)
  }
}

const clearSelection = () => {
  xTable.value.clearSelection()
}

let pageChange = (page: number) => {
  emit('pageChange', page)
}
let rowClick = (row, column, event) => {
  xTable.value.clearSelection()
  toggleRowSelection(row, true)
  emit('rowClick', row, column, event)
}
defineExpose({ toggleRowSelection, clearSelection, setSelections, xTable: xTable })
</script>

<style lang="scss">
.x-table {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.singleTable) {
    .x-table-main.el-table-column--selection {
      .cell {
        display: none;
      }
    }
  }

  :deep(.el-table.el-table--striped) {
    &.el-table--small {
      font-size: 13px;
    }

    .x-table-main {
      font-weight: bold;
      font-size: 15px;
      text-align: center;
    }

    .el-button--text {
      text-decoration: underline;
    }

    th.is-leaf,
    td {
      border-bottom: none;
    }
  }

  .page-wrapper {
    height: 37px;
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;

    :deep(.el-pagination) {

      .btn-prev,
      .btn-next {
        .el-icon {
          width: inherit;
        }
      }
    }
  }
}
</style>
